import { CSSProperties, HTMLAttributes, RefObject } from "react"

/**
 * 表单验证的正则表达式Config
 * 这个验证需要与后端统一，待确认
 */
export const Reg = {
    // phoneReg: /^\d{3,11}$/,
    phoneReg: /^9\d{9,10}$/, // 手机号须9开头
    passwordReg: /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,19}$/,
    letterAndNumberReg: /^(?![0-9]+$)(?![a-zA-Z]+$)/,
    emailReg: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
    usernameReg: /^[A-Za-z0-9]{4,20}$/,
    otherReg: /^(?=.*[A-Za-z])(?=.*\d).{8,20}$/,
    moneyReg: /^\d+(\.\d{1,2})?$/,
    textReg: /^[A-Za-z0-9]{5,30}$/,
    depositReg: /^(100|[1-9]\d{2,4}|[1-4]\d{5}|500000)$/,
}

export enum FormFieldKey {
    "phone",
    "password",
    "checkbox",
    "username",
}

type option = {
    name: string
    value: string | undefined
}

export type DataPickerType = "datetime-local" | "date" | "month" | "week" | "time"

export type Props = HTMLAttributes<HTMLDivElement> & {
    ref?: RefObject<unknown>
    fieldName: string //fieldName 表示的是API查询接口的key值。
    initValue?: string | number | boolean | never | undefined //初始值
    onClick?: () => void
    errorRegMsg?: string
    label?: string
    required?: boolean
    pattern?: {
        minLength: number
        maxLength: number
        reg: RegExp
        errorRegMsg: string
    }
    inputType?: string
    isDisabled?: boolean
    isPhoneType?: boolean
    selectItems?: option[]
    showVerifyBox?: boolean //针对第二种password显示的情况
    showClear?: boolean //显示清除input的icon
    placeholder?: string
    showPlaceholder?: boolean //针对input没有placeholder的情况
    style?: CSSProperties
    className?: string
    isShowTip?: boolean
    //后面可以在自定义一些配置值
    iconSrc?: React.ReactNode | string | null // 允许用户自定义输入框前的图标
    min?: number // 允许的最小值
    max?: number // 允许的最大值
    customText?: string | undefined
    customOnClick?: () => void
    isInputPlaceholder?: boolean
    onCustomError?: (fieldName: string, errorMsg: string) => void
}

export const SelectItems = [
    {
        name: "All",
        value: "all",
    },
    {
        name: "Pending",
        value: "pending",
    },
    {
        name: "Completed",
        value: "completed",
    },
    {
        name: "Failed",
        value: "failed",
    },
]
